import {
  Button,
  Card,
  Form,
  Typography,
  Row,
  InputNumber,
  Alert,
  message,
  Tooltip,
  Icon,
  Modal,
} from 'antd';
import React, { useState } from 'react';
import IconFont from '@/components/IconFont';
import request from '@/utils/request';

const { Title, Text } = Typography;

function VersionCleanupTool({ form }) {
  const { getFieldDecorator, validateFields } = form;
  const [loading, setLoading] = useState(false);

  const handleClean = () => {
    validateFields((err, data) => {
      if (err) return;
      Modal.confirm({
        title: `你确定要批量清理失效的版本数据吗`,
        content: (
          <>
            该操作属于危险操作，<Text type="danger">数据不可恢复</Text>，请提前做好备份！
          </>
        ),
        okType: 'danger',
        okText: '仍要删除',
        onOk() {
          setLoading(true);
          request
            .post('/version/cleanup', { data })
            .then(() => {
              message.success('清理成功');
            })
            .finally(() => {
              setLoading(false);
            });
        },
      });
    });
  };

  return (
    <Card title="失效版本清理" className="cute">
      <Title level={4}>清理策略</Title>
      <Alert
        style={{ width: 310 }}
        className="margin-bottom"
        message="同时满足以下条件的失效版本数据将被清理"
        type="info"
        showIcon
      />
      <Form>
        <Row type="flex" align="middle" className="margin-bottom">
          <span className="margin-right">失效时间超过</span>
          <Form.Item style={{ marginBottom: 0 }}>
            {getFieldDecorator('invalidDays', {
              initialValue: 20,
              validateFirst: true,
              rules: [
                {
                  required: true,
                  message: '不能为空',
                },
                {
                  validator(_rule, value, callback) {
                    if (typeof value === 'string') {
                      callback('格式错误');
                      return;
                    }
                    if (typeof value === 'number') {
                      if (value < 5) {
                        callback('不能小于5天');
                        return;
                      }
                    }
                    callback();
                  },
                },
              ],
            })(<InputNumber />)}
          </Form.Item>
          <span className="margin-left">天</span>
        </Row>
        <Row type="flex" align="middle" className="margin-bottom">
          <span className="margin-right">与当前最新的生效版本号相差超过</span>
          <Form.Item style={{ marginBottom: 0 }}>
            {getFieldDecorator('versionNumberDiff', {
              initialValue: 5,
              validateFirst: true,
              rules: [
                {
                  required: true,
                  message: '不能为空',
                },
                {
                  validator(_rule, value, callback) {
                    if (typeof value === 'string') {
                      callback('格式错误');
                      return;
                    }
                    if (typeof value === 'number') {
                      if (value < 2) {
                        callback('相差值不能小于2');
                        return;
                      }
                    }
                    callback();
                  },
                },
              ],
            })(<InputNumber />)}
          </Form.Item>
          <Tooltip title="如果不存在生效的版本，则以最后一个失效版本作为比较基准">
            <Icon className="margin-left" onClick={() => {}} type="question-circle-o" />
          </Tooltip>
        </Row>

        <Button type="danger" loading={loading} onClick={handleClean}>
          <IconFont type="icon-cache" />
          清理
        </Button>
      </Form>
    </Card>
  );
}

export default Form.create()(VersionCleanupTool);
